<!--template放HTML script放JS 上style放CSS
注意：script标签尚必须有setup-->
<template>
<h1>第一个vue页面</h1>
<p>{{info}}</p>
  <h4>{{info+'中午好'}}</h4>
  {{info}}
  <hr>
  <button @click="f">按钮</button>
  <hr>
  <p>{{info2}}</p>
  <p v-text="info2"></p><!-- v-text渲染文本内容 -->
  <p v-html="info2"></p><!-- v-html若有html元素，会按照元素效果进行渲染 -->
  <hr>
  <button @click="f2">计数</button>
  <p>计数{{count}}</p>
</template>

<script setup>
import {ref} from "vue";

  //1.定义响应式变量
const info=ref('我是info666');
const info2=ref('今<b>天</b>中午<mark>吃什么</mark>？');

//定义箭头函数
const f=()=>{
  //在JS中使用响应式变量，必须加.value
  console.log(info.value)
}
const count=ref(0)
const f2=()=>{
  count.value++;
}
</script>

<style scoped>

</style>